<template>
  <div class="base-container">
    <t-form ref="form" :data="queryParams" label-width="80" @reset="onReset" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">
      <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="字典名称" name="dictType">
            <t-select v-model="queryParams.dictType" filterable>
              <t-option
                v-for="item in typeOptions"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictType"
              />
            </t-select>
          </t-form-item>
          <t-form-item label="字典标签" name="dictLabel">
            <t-input
              v-model="queryParams.dictLabel"
              clearable
              placeholder="请输入字典标签"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="状态" name="status">
            <t-select clearable style="width: 240px" placeholder="字典状态" v-model="queryParams.status">
              <t-option v-for="(item, index) in dict.type.sys_normal_disable" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit">查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>

        </t-col>
      </t-row>
    </t-form>
    <div class="btn-group-inline">
      <t-button @click="dialog.header='添加字典类型';dialog.dictCode=0;dialog.open_add_edit = true;" variant="outline" theme="primary">
        <t-icon name="add" slot="icon"/>
        新增
      </t-button>
    </div>
    <t-table
      rowKey="dictCode"
      :data="data"
      :columns="columns"
      hover
      :pagination="pagination"
      :loading="dataLoading"
    >
      <template #dictType="{ row }">
        <router-link :to="'/home/system/dict-data/' + row.dictId" class="link-type">
          <span>{{ row.dictType }}</span>
        </router-link>
      </template>
      <template #listClass="{ row }">
        {{ row.listClass | filterByDict(listClassOptions) }}
      </template>
      <template #status="{ row }">
        <t-tag v-if="row.status === '0'" theme="success" variant="light">正常</t-tag>
        <t-tag v-else theme="danger" variant="light">停用</t-tag>
      </template>
      <template #op="{ row }">
        <t-button v-hasPermi="['system:user:edit']" @click="dialog.header='修改字典类型';dialog.dictCode=row.dictCode;dialog.open_add_edit = true;" size="small" variant="text" class="t-button-link">
          <t-icon name="edit-1" slot="icon"/>
          修改
        </t-button>
        <t-button theme="danger" v-hasPermi="['system:user:remove']" @click="handleDelete(row.dictCode)" size="small" variant="text" class="t-button-link">
          <t-icon name="delete" slot="icon"/>
          删除
        </t-button>
      </template>
    </t-table>
    <add-edit-dict-data @reload="getList()" :dictType="queryParams.dictType" :header="dialog.header" :dictCode="dialog.dictCode" :visible.sync="dialog.open_add_edit" v-if="dialog.open_add_edit"></add-edit-dict-data>

  </div>
</template>

<script>
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";

import AddEditDictData from "./components/add-edit-dict-data.vue";

export default {
  name: "home-system-dict-data-index",
  dicts: ['sys_normal_disable'],
  components:{
    AddEditDictData
  },
  data(){
    return {
      listClassOptions: [
        {
          value: "default",
          label: "默认"
        },
        {
          value: "primary",
          label: "主要"
        },
        {
          value: "success",
          label: "成功"
        },
        // {
        //   value: "info",
        //   label: "信息"
        // },
        {
          value: "warning",
          label: "警告"
        },
        {
          value: "danger",
          label: "危险"
        }
      ],
      dictId: 0,
      data:[],
      columns:[
        {
          colKey: "dictCode",
          title: "字典编码",
          align: "center"
        },
        {
          colKey: "dictLabel",
          title: "字典标签",
          align: "center"
        },
        {
          colKey: "dictValue",
          title: "字典键值",
          align: "center"
        },
        {
          colKey: "dictSort",
          title: "字典排序",
          align: "center"
        },
        {
          colKey: "status",
          title: "状态",
          align: "center"
        },
        {
          colKey: "listClass",
          title: "回显样式",
          align: "center"
        },
        {
          colKey: "remark",
          title: "备注",
          align: "center"
        },
        {
          colKey: "createTime",
          title: "创建时间",
          align: "center"
        },
        {
          colKey: "op",
          title: "操作",
          align: "center"
        },
      ],
      // 默认字典类型
      defaultDictType: "",
      // 类型数据字典
      typeOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictName:"",
        dictType:"",
        dictLabel: "",
        dateRange:[],
        status:""
      },
      dataLoading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      dialog:{
        header:"",
        open_add_edit: false,
        dictCode:0,
      }
    }
  },
  async created() {
    const dictId = this.$route.params && this.$route.params.dictId;
    this.dictId = dictId;
    await this.getTypeList();
    this.getType(dictId);
  },
  methods:{
    onSubmit(){
      this.getList();
    },
    onReset(){
      this.pagination.current = 1;
      this.queryParams.dictType = this.defaultDictType;
      this.getList();
    },
    /** 查询字典类型详细 */
    getType(dictId) {
      getType(dictId).then(response => {
        this.queryParams.dictType = response.data.dictType;
        this.defaultDictType = response.data.dictType;
        this.getList();
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    /** 查询字典类型列表 */
    getTypeList() {
      return listType().then(response => {
        this.typeOptions = response.rows;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getList(){
      this.dataLoading = true;
      listData(this.queryParams).then((res) =>{
        this.data = res.rows;
        this.pagination.total = res.total;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      })
    },
    handleDelete(dictCode){
      const confirmDia = this.$dialog.confirm({
        header:"系统提示",
        body:`是否确认删除字典编码为"${dictCode}"的数据项？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          delData(dictCode).then(
            (res) => {
              this.getList();
              this.$message.success("删除成功");
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });
        },
      })
    }
  }
}
</script>

<style scoped>

</style>
